import React, { useEffect, useCallback, useState } from 'react';
import {
  getRestaurantMonthSales,
  MonthSales,
  QueryMonthSales,
} from '@/service/restaurant';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import dayjs from 'dayjs';
import BingEch from './piePlot';
import { DatePicker, DatePickerProps } from 'antd';
import LineChart from './IndexPageTable';

const App: React.FC = () => {
  dayjs.extend(customParseFormat);
  const restaurantId = localStorage.restaurant;
  const dateFormat = 'YYYY-MM';
  const [date, setDate] = useState(dayjs().format(dateFormat));
  const [monthSales, setMonthSales] = useState<MonthSales | null>(null);

  //发送查询请求
  const fetchData = useCallback(async () => {
    const query: QueryMonthSales = {
      restaurantId: restaurantId,
      date: date,
    };
    const res = await getRestaurantMonthSales(query);
    setMonthSales({
      total: res.total,
      dishList: res.dishList,
    });
    debugger;
  }, [date]);

  const onChange: DatePickerProps['onChange'] = (dateString) => {
    setDate(dayjs(dateString).format('YYYY-MM'));
  };

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <>
      <div>月度总销量:{monthSales?.total}</div>
      <br />
      <div style={{ flex: 1 }}></div>
      <DatePicker onChange={onChange} picker="month" />
      {monthSales && monthSales.total && monthSales.dishList && (
        <div style={{ flex: 1 }}>
          <BingEch {...monthSales} />
        </div>
      )}
      <div style={{ flex: 1 }}>
        <LineChart></LineChart>
      </div>
    </>
  );
};

export default App;
